<template>
  <div class="active-wrap">
    <div class="bg-box" v-for="(item,index) in itemList" :key="index" @click="toPage(item.id)">
      <div class="logo-box"><img :src="item.activityUrl" class="logo" onclick="return false"/></div>
      <div class="title">{{item.activityName}}</div>
      <div class="active-time">活动时间：<span>{{item.activityBeginTime | format}}</span>&nbsp;-&nbsp;<span>{{item.activityEndTime | format}}</span>
      </div>
      <div class="btn-box end" v-if="item.countDownTime <=0 ">活动已结束</div>
      <div class="btn-box start" v-else>立即参与</div>
    </div>

    <back-page @backPage="back"></back-page>
  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env";
  import {formatDate} from "../../common/js/util"
  import backPage from "../../components/backpage"

  export default {
    data() {
      return {
        itemList: []
      }
    },
    mounted() {
      this.$vux.loading.show({
        text: '加载中',
      });
      //获取活动封面
      this.axios.get(baseUrl + "/activity/get_activity_list").then((res) => {
        let resultObj = res.data;
        this.$vux.loading.hide();
        if (resultObj.code == 0) {
          this.itemList = resultObj.data;
        } else {
          this.$vux.toast.text(resultObj.msg, "middle");
        }
      }).catch((error) => {
        this.$vux.loading.hide();
        this.$vux.toast.text("网络异常", "middle");
      });
    },
    methods: {
      toPage(id) {//跳转活动详情
        this.$router.push({path: "/activity", query: {id: id}});
      },
      back() {
        this.$router.push('/mine');
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      }
    },
    components: {
      backPage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"
  .active-wrap
    wh(100%, auto)
    overflow: hidden
    .bg-box
      margin: 0 auto
      margin-top: 0.253rem
      wh(92.53%, 3.493rem)
      overflow: hidden
      .logo-box
        wh(92.53%, 3.493rem)
        position: absolute
        z-index: -1
        .logo
          wh(100%, 100%)
          border-radius: 0.08rem
      .title
        margin-top: 0.853rem
        margin-left: 0.547rem
        margin-bottom: 0.373rem
        size-color(0.533rem, rgba(255, 255, 255, 1))
        font-weight: bold
      .active-time
        margin-left: 0.547rem
        margin-bottom: 0.427rem
        size-color(0.32rem, rgba(255, 255, 255, 1))
      .btn-box
        fj(center, center)
        margin-left: 0.773rem
        wh(2.587rem, 0.613rem)
        line-height: 0.613rem
        border-radius(0.307rem)
      .start
        text-shadow: 0rem 0.013rem 0rem rgba(212, 48, 0, 0.35)
        size-color(0.347rem, rgba(255, 95, 48, 1))
        background: rgba(255, 255, 255, 1)
      .end
        background: rgba(221, 179, 170, 1)
        size-color(0.347rem, rgba(255, 255, 255, 1))
</style>
